<template>
    <div :style="{ height: '500%', width: '100%' }" ref="myquestionDetailAnalysis"></div>
</template>

<script>
export default {
    name: "QuestionDetailAnalysis",
    data() {
        return {
            option: {
                color:["#56A3F1","#FF917C","#FFE434"],
                title: {
                    text: "Distribution of Important Indicators",
                },
                legend: {
                    y: 40,
                    textStyle: {
                        fontSize: 15,
                    },
                },
                tooltip: {
                    shared: true,
                },
                radar: [
                    {
                        indicator: [
                            { text: "当前年龄", max: 90 },
                            { text: "初潮年龄", max: 50 },
                            { text: "头胎年龄", max: 70 },
                            { text: "绝经年龄", max: 70 },
                            { text: "烟龄", max: 50 },
                        ],
                        center: ["40%", "60%"],
                        radius: 180,
                        startAngle: 90,
                        splitNumber: 4,
                        shape: "circle",
                        axisName: {
                            formatter: "{value}",
                            color: "#428BD4",
                        },
                        splitArea: {
                            areaStyle: {
                                shadowColor: "rgba(0, 0, 0, 0.2)",
                                shadowBlur: 10,
                            },
                        },
                        axisLine: {
                            lineStyle: {
                                color: "rgba(211, 253, 250, 0.8)",
                            },
                        },
                        splitLine: {
                            lineStyle: {
                                color: "rgba(211, 253, 250, 0.8)",
                            },
                        },
                    },
                ],
                series: [
                    {
                        type: "radar",
                        emphasis: {
                            lineStyle: {
                                width: 4,
                            },
                        },
                        data: [
                            {
                                value: [52, 14, 22, 50, 0],
                                name: "您的指标",
                                label: {
                                    show: true,
                                    formatter: function (params) {
                                        return params.value;
                                    },
                                },
                            },
                            {
                                value: [70, 16, 50, 55, 10],
                                name: "最高风险值",
                                areaStyle: {
                                    color: "rgba(233, 102, 102, 0)",
                                },
                                label: {
                                    show: true,
                                    formatter: function (params) {
                                        return params.value;
                                    },
                                },
                            },
                            {
                                value: [30, 13, 22, 45,0],
                                name: "最低风险值",
                                areaStyle: {
                                    color: "rgba(233, 102, 102, 0)",
                                },
                                label: {
                                    show: true,
                                    formatter: function (params) {
                                        return params.value;
                                    },
                                },
                            },
                        ],
                    },
                ],
            },
        }
    },
    mounted() {
        this.questionDetailAnalysis()
    },
    methods: {
        questionDetailAnalysis() {
            let myChart = this.$echarts.init(this.$refs.myquestionDetailAnalysis);
            myChart.setOption(this.option);
        },
    }
}
</script>

<style>
</style>